
import {
    createRouter,
    createWebHashHistory,
    createWebHistory,
} from 'vue-router'
//1.定义路由组件 主要是从文件导入
//静态导入
// import Home from '../views/Home.vue'
import About from '../views/About.vue'
import User from '../views/User.vue'
import NotFound from '../views/NotFound.vue'
import News from '../views/News.vue'
import Parent from '../views/Parent.vue'
import Styleone from '../views/Styleone.vue'
import Styletwo from '../views/Styletwo.vue'
import Page from '../views/Page.vue'
import ShopTop from '../views/shop/ShopTop.vue'
import ShopMain from '../views/shop/ShopMain.vue'
import ShopFloot from '../views/shop/ShopFloot.vue'

//路由懒加载: 用到时才加载
const Home = ()=> import('../views/Home.vue')

//2.定义一些路由
//每个路由都需要映射到一个组件
const routes = [//路由映射数组

    {
        path: '/',
        //重定向
        // redirect:'/home'
        //命名路由
        // redirect:"{name:'home'}"
        //方法
        redirect: (to) => {
            console.log(to);
            return { path: '/home' }
        }

    },

    {
        path: '/home',
        name: 'home',
        component: Home,
    },
    {
        path: '/about',
        component: About,
        //每路守卫
        beforeEnter: (to, from, next) => {
            console.log(to);
            console.log(from);
            if (123 == 123) {
                //放行
                next();
            }
        }
    },
    {
        //动态路由
        path: '/user/:id',
        component: User,
        props: true

    },
    {//正则表达式 \\d+ 表示数字
        // path: '/news/:id(\\d+)',
        //表示多个参数 id+
        //参数可有可无 id* 多个参数可以(重复叠加)
        //  path: '/news/:id*',
        //参数可有可无 多个参数不行(不能重复叠加的)
        name: "news",
        path: '/news/:id?',
        component: News,
    },
    {
        path: '/parent',
        alias: '/father',//起别名
        component: Parent,
        children: [
            {
                path: "styleone",
                component: Styleone,
            },
            {
                path: "styletwo",
                component: Styletwo,
            }
        ]
    },
    {
        path: '/page',
        component: Page,
    },
    {
        path: '/shop/:id',
        components: {
            default: ShopMain,
            ShopTop: ShopTop,
            ShopFloot: ShopFloot
        },
        props: { default: true, ShopFloot: false, ShopTop: false }
    },

    {
        //404页面
        //使用正则的方式 
        path: '/:path(.*)',
        component: NotFound,

    },
]
//3. 创建路由实例并传递 'routes'配置
const router = createRouter({
    //4. 内部提供了 history模式  hash模式
    // history: createWebHashHistory(),    //不会发送请求到服务器
    //使用history模式  两者区别有无#
    history: createWebHistory(),   //发送请求到服务器
    routes,

})


//全局守卫 进入每个路由组件都会触发
//to去哪里
//from 从哪来
//next  通行证 用于验证是否符合条件 然后通行
router.beforeEach((to, from, next) => {
    console.log(to);
    console.log(from);
    next();
})
export default router

// 5. 创建并挂载实例 此步骤在main.js中实现


